<template>
  <div>
    <el-dialog title="工单详情" :visible.sync="dialogVisible" width="900px" :show-close="false"
      :close-on-click-modal="false" :append-to-body="true">
      <!-- <div class="work" @click="onWork" v-if="flag">关联隐患</div> -->
      <div class="title">基本信息</div>
      <el-row>
        <el-col :span="8">
          <div class="div_box">
            工单名称：<span>{{ localEditInfo.name }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="div_box">
            工单号：<span>{{ localEditInfo.number }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="div_box">
            工单类型：<span>
              <span v-if="localEditInfo.type == 1">人工上报工单</span>
              <span v-else-if="localEditInfo.type == 0">设备上报工单</span>
              <span v-else-if="localEditInfo.type == 2">告警工单</span>
              <span v-else-if="localEditInfo.type == 3">抄送工单</span>
            </span>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <div class="div_box">
            工单状态：<span>
              <span v-if="localEditInfo.status == 1">待派单</span>
              <span v-else-if="localEditInfo.status == 2">待接单</span>
              <span v-else-if="localEditInfo.status == 3">修复中</span>
              <span v-else-if="localEditInfo.status == 4">已完成</span>
              <span v-else-if="localEditInfo.status == 5">已完成</span>
              <span v-else-if="localEditInfo.status == 6">已完成</span>
              <span v-else-if="localEditInfo.status == 7">已忽略</span>
            </span>
          </div>
        </el-col>
        <!-- <el-col :span="8">
          <div class="div_box">
            维保组名称：<span>{{ localEditInfo.maintenanceName }}</span>
          </div>
        </el-col> -->
        <el-col :span="8">
          <div class="div_box">
            创建时间：<span>
              {{ localEditInfo.createTime }}
            </span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="div_box" v-if="editInfo.status == 6">
            完成时间：<span>{{ localEditInfo.completionTime }}</span>
          </div>
        </el-col>
      </el-row>

      <!-- <el-row>
        <el-col :span="8">
          <div class="div_box" v-if="editInfo.status != 1">
            维修技工：<span>{{ localEditInfo.username }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="div_box"></div>
        </el-col>
      </el-row> -->

      <div class="title">工单流转</div>

      <div class="timeline-container">
        <el-timeline>
          <el-timeline-item color="#7367F0" size="large"
            v-if="editInfo.status == 6 || editInfo.status == 7 || editInfo.status == 4">
            <div class="item-title">
              工单结束 <span>{{ localEditInfo.completionTime }}</span>
            </div>
          </el-timeline-item>

          <el-timeline-item color="#7367F0" size="large" v-if="workStr.ccPersons">
            <div class="item-title">
              抄送人
              <div style="color: #cfd3ec;margin: 8px 0;" v-for="(item, index) in workStr.ccPersons" :key="index">{{ item
              }}</div>
            </div>
          </el-timeline-item>

          <el-timeline-item color="#7367F0" size="large" v-for="(item, index) in workList" :key="index">
            <div>
              <div class="item-title">
                {{
                  item.status == 1
                    ? "派单"
                    : item.status == 2
                      ? "接单"
                      : item.status == 3
                        ? "值班人员退单"
                        : item.status == 4
                          ? "修复中"
                          : item.status == 5
                            ? "完成修复"
                            : item.status == 6
                              ? "完成修复"
                              : item.status == 7
                                ? "完成修复"
                                : item.status == 8
                                  ? "完成修复"
                                  : item.status == 9
                                    ? "完成修复"
                                    : item.status == 10
                                      ? "已忽略"
                                      : "重新派单"
                }}
                <span>{{ item.createTime }}</span>
              </div>
              <div class="info-box">
                <div class="info-row">
                  <div class="label">
                    <div v-if="item.status == 1">派单人：{{ item.username }}</div>
                    <div v-else>处理人：{{ item.username }}</div>
                    <div v-if="item.status != 10 && item.remark != ''">备注：{{
                      item.remark == "" ? "- " : item.remark }}</div>
                  </div>
                </div>
                <div class="info-row" v-if="item.fileList != null && item.fileList != ''">
                  <div class="image-box">
                    <el-image class="elImage" :src="item2.file" v-for="(item2, index) in item.fileList" :key="index"
                      :preview-src-list="item.fileListArray" v-if="
                        item2.file.indexOf('.png') != -1 ||
                        item2.file.indexOf('.jpg') != -1
                      "></el-image>
                    <div v-else style="width: 100%;">
                      <video ref="videoPlayer" :src="item2.file" controls class="elImage" style="width: 12%;"></video>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-timeline-item>

          <el-timeline-item color="#7367F0" size="large" style="padding-bottom: 0;">
            <div class="item-title">
              生成工单 <span>{{ localEditInfo.createTime }}</span>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>

      <handlehidDanger ref="refhandlehidDanger" :editInfo="editInfo"></handlehidDanger>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import loadMore from "@mixin/loadMore";
import { reqByWorkOrderId, reqByHiddenDangerId } from "@/api/api";
import { mapState } from "vuex";

export default {
  name: "",
  props: ["editInfo"],
  mixins: [loadMore],
  components: {
    handlehidDanger: () =>
      import("@/views/warnList/hidden/components/handlehidDanger"), //异步组件,解决“[Vue warn]: Unknown custom element”错误,提高性能。
  },
  data() {
    return {
      dialogVisible: false,
      workList: [],
      flag: true,
      localEditInfo: {},
      workStr: {}
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    dialogVisible(e) {
      if (e) {
        this.localEditInfo = this.editInfo;
        // this.getWorkOrderLog()
      }
    },
  },
  methods: {
    // 打开隐患详情
    onWork() {
      this.$refs.refhandlehidDanger.dialogVisible = true;
      // this.$refs.refhandlehidDanger.getHiddenDanger(this.editInfo.hiddenDangerId);
    },
    // 隐患id获取工单处理记录
    async getByHiddenDangerId(hiddenDangerId) {
      const res = await reqByHiddenDangerId(hiddenDangerId);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res);
      this.workList = [];
      this.flag = false;
      if (res.data.row != null) {
        this.localEditInfo = res.data.row;
        if (res.data.row.workOrderLogList.length) {
          res.data.row.workOrderLogList.forEach((item, index) => {
            if (item.fileList) {
              item.fileListArray = item.fileList.map(item2 => item2.file);
            }
            this.workList.unshift(item);
          });
        }
      }
    },
    // 获取工单处理记录
    async getWorkOrderLog(id) {
      const res = await reqByWorkOrderId(id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res);
      // let { rows } = res.data;
      this.workStr = res.data.row || ''
      this.workList = [];
      // if (rows.length) {
      //   rows.forEach((item, index) => {
      //     if (item.fileList) {
      //       item.fileListArray = item.fileList.map(item2 => item2.file);
      //     }
      //     this.workList.unshift(item);
      //   });
      // }

      if (res.data.row != null) {
        if (res.data.row.workOrderLogList.length) {
          res.data.row.workOrderLogList.forEach((item, index) => {
            if (item.fileList) {
              item.fileListArray = item.fileList.map(item2 => item2.file);
            }
            this.workList.unshift(item);
          });
        }
      }

    },

    // 点击关闭弹框
    closeDialog() {
      this.dialogVisible = false;
    },
  },
  deactivated() {
    this.closeDialog();
  },
};
</script>

<style lang="less" scoped>
@import url("../../../common.less");

span {
  color: @primaryFFFColor2;
}

// 内容
::v-deep .el-descriptions__body {
  background-color: @primaryHeaderBgcolor;
}

// 边框
::v-deep .el-descriptions-item__cell {
  border: 1px solid @primaryBorderColor !important;
}

// 标题
::v-deep .el-descriptions-item__label.is-bordered-label {
  background-color: @primaryHeaderBgcolor;
}

.div_box {
  height: 45px;
  // line-height: 30px;
  color: @primaryThemeTxtColor;
}

.title {
  height: 40px;
  color: @primaryFFFColor2;
  font-size: 16px;
}

// 竖线样式
::v-deep .el-timeline-item__tail {
  border-left: dashed 1px #7367f0;
}

.timeline-container {
  width: 100%;
  padding-left: 5px;
  color: @primaryThemeTxtColor2;
  max-height: 34vh;
  overflow: auto;

  .item-title {
    font-size: 14px;
    color: #7367f0;
    margin: 5px 0;

    >span {
      color: #7367f0;
      margin: 0 6px;
    }
  }

  .info-box {
    .info-row {
      display: flex;
      justify-content: space-between;
      margin: 8px 0;
      color: @primaryThemeTxtColor2;

      >div {
        width: 33%;
      }

      .label {
        width: 100%;
      }

      .image-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .elImage {
          width: 8%;
          // height: 171px;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
    }

    .btn-row {
      text-align: right;
    }
  }
}

.el-timeline-item {
  padding-bottom: 5px;
}

::v-deep .el-dialog__body {
  position: relative !important;
}

.work {
  position: absolute;
  right: 20px;
  top: 30px;
  color: #7367f0;
  cursor: pointer;
}
</style>